---
title: <UpdateNameCard />
description: Settings card for updating user's display name
---

## Import

```tsx
import { UpdateNameCard } from "@better-auth/ui-react/components"
```

## Usage

```tsx
<UpdateNameCard />
```

## Props

| Name           | Type                | Default     | Description                                |
|----------------|---------------------|-------------|--------------------------------------------|
| `className`    | `string`            | `undefined` | Additional CSS classes for styling         |
| `localization` | `AuthLocalization`  | `undefined` | Localization object for translations       |

## Example

```tsx
import { UpdateNameCard } from "@better-auth/ui-react/components"

export function AccountSettings() {
    return (
        <div className="space-y-4">
            <UpdateNameCard />
        </div>
    )
}
```

## Features

- Update user's display name
- Built-in form validation
- Success/error feedback
- Loading states during update
- Integrated with Better Auth session management 